<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="lib/react.development.js"></script>
    <script src="lib/react-dom.development.js"></script>
    <script src="lib/babel.min.js"></script>
</head>
<body>
    <div id="app">

    </div>
    <div id="app2"></div>
</body>
<script type="text/babel"> 
function HelloWorld(){
    return <div>hello world</div>
}
// 生成虚拟dom
// 方式一，直接调用函数来生成
// let helloWorld=HelloWorld()

// 方式二,写标签来生成
let helloWorld=<HelloWorld/>
ReactDOM.render(helloWorld,document.getElementById("app2"))


// react组件的props可以传递data,子组件,slot,事件函数
function Hello(props){
    return <div className="fontcolor">
        {props.name}
        {props.Welcome}
        {props.children}
        <div onClick={props.clickHello}>props传递点击事件</div>
        </div>
}
function Welcome(props){
return (<div>pros传递子组件</div>)
}
function clickHello(){
    alert("props传递点击事件")
}
ReactDOM.render(<Hello name="props传递data" Welcome={Welcome()} clickHello={clickHello}>
               <div>props.childen传递slot</div>
                </Hello>
    ,document.getElementById("app"))
</script>
</html>